<template>
  <a-modal title="新建导航" :width="640" :visible="visible" :confirmLoading="loading" @ok="() => { $emit('ok') }" @cancel="() => { $emit('cancel') }">
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout">
        <a-form-item label="名称">
          <a-input v-decorator="['gardenName', {rules: [{
                validator:checkStr
              },{required: true, message: '园区名称不能为空'}]}]" />
        </a-form-item>
        <a-form-item label="联系人">
          <a-input v-decorator="['contactName', {rules: [{required: true, message: '联系人不能为空'}]}]" />
        </a-form-item>
        <a-form-item label="联系电话">
          <a-input v-decorator="['contactPhone', {rules: [ {
                validator:checkPhone
              },{required: true, message: '联系电话不能为空'}]}]" />
        </a-form-item>
        <a-form-item label="征收模式">
          <a-select v-decorator="['collectionModel', {initialValue: initialValue,rules: [{required: true, message: '征收模式不能为空'}]}]" placeholder="请选择">
            <a-select-option v-for="(item,index) in downList" :key="index" :value="item.value">{{item.label}}</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'

// 表单字段
const fields = ['gardenName', 'contactName', 'contactPhone', 'collectionModel']

export default {
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    loading: {
      type: Boolean,
      default: () => false,
    },
    model: {
      type: Object,
      default: () => null,
    },
  },
  data() {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 },
      },
    }
    return {
      form: this.$form.createForm(this),
    }
  },
  created() {
    // 防止表单未注册
    fields.forEach((v) => this.form.getFieldDecorator(v))
    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      this.model && this.form.setFieldsValue(pick(this.model, fields))
    })
  },
  methods: {
    // 下拉
    async getDownList() {
      this.downList = []
      let res = await getAllGardenType()
      res.data.forEach((element) => {
        for (var pl in element) {
          if (!this.initialValue) {
            this.initialValue = pl
          }

          this.downList.push({
            value: pl,
            label: element[pl],
          })
        }
      })
    },
  },
}
</script>
